// 参考链接：https://codesandbox.io/s/k260nyxq9v?file=/index.js:0-2887
import { Space } from "antd";
import { Component } from "react";
/**
 * DragDropContext - 拖拽上下文组件，最外层需要使用
 * Droppable       - 可放置的组件
 * Draggable       - 可拖拽的组件
 */
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

// fake data generator
const getItems = (count) =>
  Array.from({ length: count }, (v, k) => k).map((k) => ({
    id: `item-${k}`,
    content: `item ${k}`,
  }));

// a little function to help us with reordering the result
const reorder = (list, startIndex, endIndex) => {
  const result = Array.from(list);

  // 先移除 startIndex 位置的元素
  const [removed] = result.splice(startIndex, 1);

  // 再将移除的元素插入到目标位置
  result.splice(endIndex, 0, removed);

  return result;
};

const grid = 8;

// 获取当前操作元素的样式
const getItemStyle = (isDragging, draggableStyle) => ({
  // some basic styles to make the items look a bit nicer
  userSelect: "none",
  padding: grid * 2,
  margin: `0 0 ${grid}px 0`,

  // 拖拽中的样式
  background: isDragging ? "green" : "grey",

  // styles we need to apply on draggables
  ...draggableStyle,
});

// 获取可放置元素的样式
const getListStyle = (isDraggingOver) => ({
  background: isDraggingOver ? "red" : "green",
  padding: grid,
  width: 250,
});

export default class Monitor extends Component {
  constructor(props) {
    super(props);
    // 初始化 state
    this.state = {
      items: getItems(10),
      rights: getItems(0),
    };
    // this 指向的提前bind
    this.onDragEnd = this.onDragEnd.bind(this);
  }

  // 拖拽完成
  onDragEnd(result) {
    console.log("onDragEnd", result);
    // dropped outside the list
    if (!result.destination) {
      return;
    }

    if (result.source.droppableId === result.destination.droppableId) {
      const items = reorder(
        this.state[result.source.droppableId],
        result.source.index,
        result.destination.index
      );

      this.setState({
        [result.source.droppableId]: items,
      });

      return;
    }

    // 不等
    this.setState((state) => {
      // 1. 将来源区域的数据给移除
      const sourceList = Array.from(state[result.source.droppableId]);
      const [removed] = sourceList.splice(result.source.index, 1);

      // 2. 将 removed 写入到目标
      const targetList = Array.from(state[result.destination.droppableId]);
      targetList.splice(result.destination.index, 0, removed);

      return {
        [result.source.droppableId]: sourceList,
        [result.destination.droppableId]: targetList,
      };
    });
  }

  // Normally you would want to split things out into separate components.
  // But in this example everything is just done in one place for simplicity
  render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <Space>
          <Droppable droppableId="items">
            {/* render children 来渲染 可拖拽元素 */}
            {(provided, snapshot) => {
              return (
                <div
                  {...provided.droppableProps}
                  ref={provided.innerRef}
                  id="box"
                  style={getListStyle(snapshot.isDraggingOver)}
                >
                  {this.state.items.map((item, index) => (
                    <Draggable
                      key={item.id}
                      draggableId={item.id}
                      index={index}
                    >
                      {(provided, snapshot) => (
                        <div
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          className="itemitemitemitem"
                          style={getItemStyle(
                            snapshot.isDragging,
                            provided.draggableProps.style
                          )}
                        >
                          {item.content}
                        </div>
                      )}
                    </Draggable>
                  ))}
                  {provided.placeholder}
                </div>
              );
            }}
          </Droppable>

          <Droppable droppableId="rights">
            {/* render children 来渲染 可拖拽元素 */}
            {(provided, snapshot) => {
              return (
                <div
                  {...provided.droppableProps}
                  ref={provided.innerRef}
                  id="box"
                  style={getListStyle(snapshot.isDraggingOver)}
                >
                  {this.state.rights.map((item, index) => (
                    <Draggable
                      key={item.id}
                      draggableId={item.id}
                      index={index}
                    >
                      {(provided, snapshot) => (
                        <div
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          className="itemitemitemitem"
                          style={getItemStyle(
                            snapshot.isDragging,
                            provided.draggableProps.style
                          )}
                        >
                          {item.content}
                        </div>
                      )}
                    </Draggable>
                  ))}
                  {provided.placeholder}
                </div>
              );
            }}
          </Droppable>
        </Space>
      </DragDropContext>
    );
  }
}
